<template>
   <div>
    <div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc;"></div>
   </div>
</template>

<script>

import LogicFlow from '@logicflow/core';
export default {
   data () {
      return {
          
      }
   },
   mounted() {
    const logicFlow = new LogicFlow({
  container: document.querySelector('#container'),
  grid: true,
});

logicFlow.render({
  nodes: [
    {
      id: 'node1',
      type: 'rect',
      x: 100,
      y: 50,
      text: '节点1',
    },
    {
      id: 'node2',
      type: 'rect',
      x: 300,
      y: 50,
      text: '节点2',
    },
  ],
  edges: [
    {
      type: 'polyline',
      sourceNodeId: 'node1',
      targetNodeId: 'node2',
    },
  ],
});
logicFlow.on('node:dragend', (event) => {
  const { item } = event; // 当前拖拽结束的节点信息
  const nodes = logicFlow.getNodes(); // 获取所有节点信息
  const currentNode = nodes.find(node => node.id === item.id); // 当前拖拽结束的节点信息
  const otherNodes = nodes.filter(node => node.id !== item.id); // 过滤掉当前节点的其他所有节点信息
  const threshold = 50; // 设置一个距离阈值，例如50px，当两个节点距离小于这个值时自动连线
  otherNodes.forEach(node => {
    const distance = Math.sqrt(Math.pow(node.x - currentNode.x, 2) + Math.pow(node.y - currentNode.y, 2)); // 计算距离
    if (distance < threshold) { // 如果距离小于阈值，则自动连线
      logicFlow.addEdge({ type: 'polyline', sourceNodeId: currentNode.id, targetNodeId: node.id }); // 添加边
    }
  });
});
   },
   methods: {

   }


}

</script>